﻿@{
    ViewData["Title"] = "缩略图管理";
    Layout = "~/Areas/Manager/Views/Shared/_Layout.cshtml";
}
<style  type="text/css">
    .layui-form-label {
        width: 150px;
        text-align: left;
    }

    .layui-input-block {
        width: 350px;
        margin-left: 200px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">缩略图管理</div>
                <div class="layui-card-body">
                    <div class="layui-bg">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width:100px;">系统模块</label>
                                <div class="layui-input-block" style="width:200px;margin-left:130px;">
                                    <select name="Type" lay-verify="required" lay-filter="Type">
                                        <option value="">搜索系统模块</option>
                                        <option value="0">Shop</option>
                                        <option value="1">CMS</option>
                                        <option value="2">SNS</option>
                                        <option value="3">Property</option>
                                        <option value="4">House</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                        <div class="layui-row">
                            <div class="layui-btn-container">
                                <div class="layui-btn-group">
                                    <button id="add" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>增加</button>
                                    <button id="deleteAll" type="button" class="layui-btn layui-btn-danger layui-btn-sm"><i class="layui-icon layui-icon-delete"></i>删除</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <table class="layui-table" lay-data="{ page:true, id:'list'}" lay-filter="list">
                                <thead>
                                    <tr>
                                        <th lay-data="{checkbox:true, fixed: true}"></th>
                                        <th lay-data="{field:'thumName',width:220}">缩略图标识符</th>
                                        <th lay-data="{field:'thumWidth',width:150}">缩略图宽度</th>
                                        <th lay-data="{field:'thumHeight',width:150}">缩略图高度</th>
                                        <th lay-data="{field:'type',templet: '#SysType',width:150}">系统模块</th>
                                        <th lay-data="{field:'thumMode',templet: '#ThumModeJS',width:230}">裁剪方式</th>
                                        <th lay-data="{field:'remark'}">描述</th>
                                        <th lay-data="{toolbar:'#tableoption',fixed: 'right',width:100}">操作</th>
                                    </tr>
                                </thead>
                            </table>
                            <script type="text/html" id="SysType">
                                {{#  if(d.type==0){ }}
                                <span>Shop</span>
                                {{#  } else if(d.type==1){ }}
                                <span>CMS</span>
                                {{#  } else if(d.type==2){ }}
                                <span>SNS</span>
                                {{#  } else if(d.type==3){ }}
                                <span>Property</span>
                                {{#  } else if(d.type==4){ }}
                                <span>House</span>
                                {{#  } }}
                            </script>
                            <script type="text/html" id="ThumModeJS">
                                {{#  if(d.thumMode=='HW'){ }}
                                <span>指定高宽缩放（补白）</span>
                                {{#  } else if(d.thumMode=='W'){ }}
                                <span>指定宽，高按比例</span>
                                {{#  } else if(d.thumMode=='H'){ }}
                                <span>指定高，宽按比例</span>
                                {{#  } else if(d.thumMode=='Cut'){ }}
                                <span>指定高宽裁减（不变形）</span>
                                {{#  } else if(d.thumMode=='Csize'){ }}
                                <span>调整图片大小</span>
                                {{#  } }}
                            </script>
                            <script type="text/html" id="tableoption">
                                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section scriptsfeet
    {
    <script type="text/javascript">

        layui.config({
            base: '/layuiadmin/' //自定义模块路径
        }).use(['form', 'layer', 'sykjwh', 'table'], function () {
            var $ = layui.$, form = layui.form, sykjwh = layui.sykjwh, table = layui.table;

            //绑定数据
            sykjwh.dataBind('@Url.Action("ThumbnailSizeList", "Ms", new { area = Constant.AREAMANAGER })');

             //编辑
            table.on('tool(list)', function (obj) {
                var data = obj.data;//获得当前行数据
                sykjwh.open('编辑缩略图内容', '@Url.Action("ThumbnailSizeEdit", "Ms", new { area = Constant.AREAMANAGER })/' + data.thumId, 700, 450);
            });

            //批量删除
            $("#deleteAll").click(function () {
                sykjwh.batOperate('@Url.Action("ThumbnailSizeDelete", "Ms", new { area = Constant.AREAMANAGER })', 'thumId');
            });

            //监听下拉选,根据下拉选值搜索
            form.on('select(Type)', function (obj) {
                console.log(obj);
                sykjwh.dataBind('@Url.Action("ThumbnailSizeList", "Ms", new { area = Constant.AREAMANAGER })', {
                    //将下拉选的value作为关键字进行搜索
                    keyWords: obj.value
                });
            });

            //添加
            $("#add").click(function () {
                sykjwh.open('编辑缩略图内容', '@Url.Action("ThumbnailSizeAdd", "Ms", new { area = Constant.AREAMANAGER })', 700, 450);
            });
        });
    </script>
}
